<template>
	<view>
		<cu-custom :bgColor="'bg-' + theme.themeColor" :isBack="false">
			<block slot="content">{{pageDesign.pageName}}</block>
		</cu-custom>
		<skeleton-home :loading="loading"></skeleton-home>
		<view v-if="!loading">
			<view v-if="!showDefultPage" v-for="(item,index) in pageDesign.pageContent.componentsList">
				<!-- 图片广告 -->
				<template v-if="item.name == 'image'">
					<diy-image :showData="item.data"></diy-image>
				</template>
				<!-- 商品 -->
				<template v-if="item.name == 'goods'">
					<diy-goods :showData="item.data"></diy-goods>
				</template>
				<!-- 公告 -->
				<template v-if="item.name == 'notice'">
					<diy-notice :showData="item.data"></diy-notice>
				</template>
				<!-- 图文导航 -->
				<template v-if="item.name == 'tabNav'">
					<diy-tabnav :showData="item.data"></diy-tabnav>
				</template>
				<!-- 魔方 -->
				<template v-if="item.name == 'magicSquare'">
					<diy-magicsquare :showData="item.data"></diy-magicsquare>
				</template>
			</view>
			<view v-if="showDefultPage">
				<view><text class="flex justify-center align-center text-red text-bold text-xl">新品上架</text></view>
				<goods-row-list :goodsList="newGoodsList"></goods-row-list>
				<view><text class="flex justify-center align-center text-red text-bold text-xl">热销商品</text></view>
				<goods-list :goodsList="hotGoodsList" class="flex"></goods-list>
			</view>
			<view class="cu-load bg-gray over">
			</view>
		</view>

	</view>
</template>

<script>
	import config from 'config/env';
	import {
		getObj as getPageDesign
	} from '@/api/pagedesign.js';
	import {
		getPage as getSpuPage
	} from '@/api/goodsspu.js';
	import goodsList from 'components/goods-list/col-list/index';
	import goodsRowList from 'components/goods-list/row-list/index';
	import diyImage from 'components/diy-page/diy-image/index';
	import diyMagicsquare from 'components/diy-page/diy-magicsquare/index';
	import diyGoods from 'components/diy-page/diy-goods/index';
	import diyNotice from 'components/diy-page/diy-notice/index';
	import diyTabnav from 'components/diy-page/diy-tabnav/index';
	import skeletonHome from '@/components/skeleton-home/index.vue';
	export default {
		components: {
			diyImage,
			diyGoods,
			diyNotice,
			diyMagicsquare,
			diyTabnav,
			goodsList,
			goodsRowList,
			skeletonHome
		},
		data() {
			return {
				loading: true,
				tabCur: 0,
				theme: getApp().globalData.theme, //主题
				showDefultPage: false, // 是否显示默认样式
				hotGoodsList: [], // 热销商品
				newGoodsList: [], // 最新商品
				pageDesign: {
					pageName: '首页'
				}
			};
		},
		onLoad() {
			getApp()
				.initPage({
					isTabar: true
				})
				.then(res => {
					this.getPageDesign();
				});
		},
		onPullDownRefresh() {
			uni.showNavigationBarLoading();
			this.getPageDesign();
			// 停止下拉动作
			uni.hideNavigationBarLoading();
			// 停止当前页面的下拉刷
			uni.stopPullDownRefresh();
		},
		onShow() {
			uni.setTabBarBadge({
				index: 2,
				text: getApp().globalData.shoppingCartCount + ""
			})
		},
		methods: {
			getPageDesign() {
				this.loading = true;
				getPageDesign().then(response => {
					this.loading = false;
					if (response.data) {
						this.pageDesign = response.data;
					} else {
						this.getData();
					}
				})
			},
			getData() {
				this.showDefultPage = true;
				this.getHotGoodsList();
				this.getNewGoodsList();
			},
			/**
			 * 获取热销商品
			 */
			getHotGoodsList() {
				getSpuPage({
						current: 1,
						size: 4,
						descs: 'sales_volume',
					})
					.then(res => {
						this.hotGoodsList = res.data.records;

					});
			},
			/**
			 * 获取最新商品
			 */
			getNewGoodsList() {
				getSpuPage({
						current: 1,
						size: 4,
						descs: 'create_time',
					})
					.then(res => {
						this.newGoodsList = res.data.records;
					});
			}
		}
	};
</script>
<style lang="scss">
	.swiper-item {
		height: 150px !important;
		border-radius: 8px !important;
	}

	.screen-swiper {
		min-height: 150px !important;
	}

	.swiper-bg {
		width: 100vw;
		height: 140px;
		border-radius: 0 0 50px 50px;
	}
</style>
